<template>
  <div class="page">
    <div class="shopInfo" v-for="(item, itemindex) in shop" :key="itemindex">
      <div class="shopImg">
        <img :src="item.img" @click="shopInfo(item.id)" />
      </div>
      <div class="shopDesc">
        <div class="shopTitle" @click="shopInfo(item.id)">{{ item.title }}</div>
        <div class="shopPrice">￥：{{ item.price }}</div>
        <el-button
          type="primary"
          class="el-icon-goods"
          @click="shopInfo(item.id)"
          >购买</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shop: ""
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      let that = this;
      this.$axios
        .get("/getData")
        .then(response => {
          that.shop = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    shopInfo(id) {
      this.$router.push({
        path: "/shopInfo",
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style>
.shopInfo {
  width: 33%;
  margin: 20px 0;
  border: 1px solid #eee;
  display: inline-block;
}
.shopImg img {
  cursor: pointer;
}
.shopTitle {
  cursor: pointer;
}
.shopDesc button {
  width: 200px;
}
</style>
